<template>
  <div class="app-container" style="background-color: rgb(255,255,255);width: 100%">
    <div v-title data-title="学校安全教育平台" style="margin-top: 50px;width: 90%;" class="me-container">
      <div class="block">
        <el-carousel :interval="4000" type="card" style="width: 90%;height:330px;margin: 0 auto">
          <el-carousel-item v-for="(item,index) in imageList" :key="index">
            <img style="width: 100%;height: 100%" :alt="item.name" :src="item.url"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-container style="text-align: center;">
        <el-main class="me-articles">
          <el-row style="margin-top: 20px;border-bottom: 1px solid #bfcbd9;">
            <el-col :lg="12" :xs="32" class="lightgreen-box" style="text-align: left">
              <h2 class="headTitle">
                <i class="icon icon-notice"></i>
                安全教育<span style="padding: 0 5px;font-size: 22px; color: #555">•</span>资源
              </h2>
            </el-col>
            <el-col :lg="12" :xs="32" class="orange-box t-ellipsis el-col_left">
              <a @click="moreTags('security')" class="me-pull-right me-tag-more moreList" title="更多">更多</a>
            </el-col>
          </el-row>
          <div class="container">
            <el-row class="item">
              <el-col :lg="12" :xs="32" class="hotRow" style="margin-top: 10px;width: 100%">
                <a @click="toInfo(hotSecurityArticles.id,'security')" :title="hotSecurityArticles.title" >
                  <p class="hotTitle" >
                    {{hotSecurityArticles.title}}
                  </p>
                </a>
                <a @click="toInfo(hotSecurityArticles.id,'security')">
                  <img class="me-tag-img" :src="hotImage" :alt="hotSecurityArticles.title" style="width: 100%;height: 220px;">
                </a>
              </el-col>
            </el-row>
            <el-row class="listUi item">
              <!--          <el-col :lg="12" :xs="2" class="lightgreen-box" style="height: 272px;">-->
              <!--            <a><img class="me-tag-img" :src="hotImage" :alt="hotSecurityArticles.title"></a>-->
              <!--          </el-col>-->
              <el-col :lg="12" :xs="32" v-for="(item,index) in articlesList" :key="index" class="el-col_left listLi">
                <a @click="toInfo(item.id,'security')" :title="item.title" >
                  {{ item.title.length > 25 ? item.title.substring(0, 25) + "..." : item.title }}
                </a>
                <span style="font-size: 14px;color: #999999;float: right">
                 ({{parseTime(item.createTime,'{m}-{d}')}})
              </span>
              </el-col>
            </el-row>
          </div>

          <el-row style="margin-top: 20px;border-bottom: 1px solid #bfcbd9;">
            <el-col :lg="12" :xs="32" class="lightgreen-box" style="text-align: left">
              <h2 class="headTitle">
                <i class="icon" style="background-position: -63px 0"></i>
                防诈案例<span style="padding: 0 5px;font-size: 22px; color: #555">•</span>展示
              </h2>
            </el-col>
            <el-col :lg="12" :xs="32" class="orange-box t-ellipsis el-col_left ">
              <a @click="moreTags('antiFraud')" class="me-pull-right me-tag-more moreList" title="更多">更多</a>
            </el-col>
          </el-row>
          <el-row class="news_list news_50">
            <el-col v-for="(item,index) in antiFraudList" :key="index" :lg="12" :xs="32" class="orange-box t-ellipsis el-col_left newsList" style="margin-top: 10px">
              <a @click="toInfo(item.id,'antiFraud')" :title="item.title">
                <p class="single-line">
                  {{ item.title.length > 34 ? item.title.substring(0, 34) + "..." : item.title }}
                </p>
              </a>
            </el-col>
          </el-row>
        </el-main>
        <el-aside>
          <card-tag :tags="hotTags"></card-tag>
          <card-article :articles="hotArticles"></card-article>
        </el-aside>
      </el-container>
    </div>
  </div>

</template>

<script>
  import CardArticle from '@/components/card/CardArticle'
  import CardTag from '@/components/card/CardTag'
  import {listSecurityArticles,getHotSecurityArticles} from "@/api/resources/securityArticles.js";
  import {listAntiFraudArticles} from "@/api/resources/antiFraudArticles.js";

  export default {
    name: 'Index',
    data() {
      return {
        hotTags: [],
        hotArticles: [],
        imageList:[
          {
            name: 'image1',
            url: require('../assets/img/lunbo1.jpg')
          },
          {
            name: 'image2',
            url: require('../assets/img/lunbo2.jpg')
          },
          {
            name: 'image3',
            url: require('../assets/img/lunbo3.jpg')
          }
        ],
        querySecParams: {
          pageNum: 1,
          pageSize: 7,
          isPopular: "0"
        },
        queryAntParams: {
          pageNum: 1,
          pageSize: 12,
        },
        articlesList:[],
        antiFraudList:[],
        hotSecurityArticles:{},
        hotImage:''
      }
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        listSecurityArticles(this.addDateRange(this.querySecParams)).then(response => {
            this.articlesList = response.rows;
        });
        listAntiFraudArticles(this.addDateRange(this.queryAntParams)).then(response => {
            this.antiFraudList = response.rows;
        });
        getHotSecurityArticles().then(response => {
          this.hotSecurityArticles = response.data;
          this.hotImage = response.data.coverFiles[0].url;
        })
      },
      moreTags(type){
        if(type === 'security'){
          this.$router.push({path:'/securityArticles/list'})
        }else if(type === 'antiFraud') {
          this.$router.push({path:'/antiFraudArticles/list'})
        }else {
          this.$router.push({path:'/securityArticles/list'})
        }
      },
      toInfo(id,type){
        if(type === 'security'){
          this.$router.push({path:'/securityArticles/info',query:{id:id}})
        }else if(type === 'antiFraud') {
          this.$router.push({path:'/antiFraudArticles/info',query:{id:id}})
        }else {
          this.$router.push({path:'/securityArticles/info',query:{id:id}})
        }
      }
    },
    components: {
      'card-article': CardArticle,
      'card-tag': CardTag,
    }
  }
</script>

<style scoped>

  .el-container {
    width: 1300px;
  }

  .el-aside {
    margin-left: 20px;
    width: 260px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }
  .me-tag-img {
    font-size: 24px;
    height: 220px;
    max-width: 93%;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .me-tag-more {
    font-size: 14px;
    color: #78b6f7;
  }
  .t-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-col_left{
    text-align: left;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .icon-notice {
    background-position: 0 -2px;
  }
  .icon {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 33px;
    background: url(../assets/img/icon_bg.png) no-repeat;
  }
  .headTitle{
    float: left;
    width: 240px;
    font-size: 22px;
    color: #666;
  }
  .listLi{
    background:url('../assets/img/bg_list.png') no-repeat center left;
    margin-top: 2px;
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 20px;
    width: 100%;
    border-bottom: 1px solid #bfcbd9;
  }
  .listUi{
    padding-bottom: 0;
    margin-top: 16px;
    margin-bottom: 20px
  }
  .container {
    display: flex;
  }
  .item{
    flex: 1;
  }
  .hotTitle{
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 30px;
    width: 83%;
    text-align: left;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 16px;
    height: 60px;
    overflow: hidden;
  }
  .moreList{
    padding-right: 16px;
    background: url(../assets/img/btn_more.png) no-repeat center right 1px;
    line-height: 36px;
    font-size: 14px;
    color: #999;
  }
  .news_list.news_50 {
    margin: 10px 0 0;
    padding-bottom: 5px;
  }
  .news_list.news_50 .newsList {
      float: left;
      margin: 0 15px;
      width: 46%;
      height: 34px;
      padding-left: 20px;
      border-bottom: 1px solid #bfcbd9;
      background: url(../assets/img/bg_list.png) no-repeat center left;
      line-height: 34px;
      font-size: 14px;
  }
   a:hover {
      text-decoration: underline;
  }
  .news_list p {
      height: 34px;
  }
  a {
      color: #333;
      text-decoration: none;
  }
  .single-line {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
</style>
